<template>
	<!-- <h3>登录</h3> -->
	<div style="margin-left:25%; width: 50%;">
		<h3 align="center">登录</h3>
		<table width="90%" border="1" cellspacing="0" style="line-height: 36px">
			<tbody>
				<tr>
					<td>手机号:</td>
					<td><input v-model="data.username" style="width: 90%;height: 100%;" type="text" /></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input v-model="data.password" style="width: 90%;height: 100%;" type="password" /></td>
				</tr>
				<tr>
					<td colspan="2"><button @click="login()">登录</button></td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script setup>
	import { $get, $postf } from '../ajax';
	import store from '@/store';
	import { reactive, ref } from 'vue';
	import router from '../router';
	
	
	const data = reactive({
		username:'',
		password:''
	})
	
	const login = ()=>{
		const fd = new FormData
		fd.append("username",data.username)
		fd.append("password",data.password)
		$postf("/api/login",fd).then( (resp) => {
			let token = resp.data.data.token
			
			window.localStorage.setItem("token",token);
			
			console.log("登录获得token=" + token);
			
			$get("/api/user/info").then( (resp) => {
				let user = resp.data.data
				store.state.user.name = user.uname
				store.state.user.role = user.role
				store.state.user.pic  = user.pic		
				
				store.state.msg="登录成功"
				if(user.role == 'adm'){
					console.log("管理员系统")
					router.push('/adm');
					return;
				}
				if(user.role == 'stu'){
					console.log("学生系统")
					router.push('/stu');
					return;
				}
				if(user.role == 'tea'){
					console.log("教师系统")
					router.push('/tea');
					return;
				}
			})
		})
	}
	
</script>

<style>
</style>